<template>
  <view class="dl-dynamic-form-item dl-cell-form">
    <block v-if="type === 'input'">
      <u-textarea v-model="currentValue" height="300rpx" :placeholder="placeholder" maxlength="200" count @input="handleValueChange" />
    </block>
    <block v-else-if="type === 'number'">
      <view class="number-wrap dl-icon">
        <u-number-box v-model="currentValue" cursorSpacing="0" :min="0" buttonSize="160" inputWidth="400rpx" @change="e => handleValueChange(e.value)"></u-number-box>
      </view>
    </block>
    <block v-else-if="type === 'upload-image'">
      <view class="upload-wrap" hover-class="none" hover-stop-propagation="false">
        <dl-uploader imgTip="只能上传jpg/png文件，且不超过10MB" :fileList="currentValue" @getFd="handleUploadChange" />
      </view>
    </block>
    <block v-else-if="type === 'upload-file'">
      <view class="upload-wrap" hover-class="none" hover-stop-propagation="false">
        <dl-uploader imgTip="上传附件" :fileList="currentValue" @getFd="handleUploadChange" />
      </view>
    </block>
  </view>
</template>

<script>
import DlUploader from '@/components/DlUploader'

export default {
  name: 'DlDynamicFormItem',
  components: {
    DlUploader
  },
  model: {
    prop: 'value',
    event: 'input' // 和PC不一样，此处只能是input
  },
  props: {
    value: {
      type: [String, Number, Boolean, Array]
    },
    type: {
      type: String,
      default: 'input'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        const obj = {
          number: 0,
          input: '',
          'upload-image': []
        }
        const defaultVal = obj[this.type]
        if (this.type === 'upload-image') {
          this.currentValue = newVal ? newVal.map(i => ({ url: i })) : defaultVal
        } else {
          this.currentValue = newVal || defaultVal
        }
      }
    }
  },
  data() {
    return {
      currentValue: ''
    }
  },
  methods: {
    handleUploadChange(fileListUrl) {
      console.log(fileListUrl)
      this.handleValueChange(fileListUrl.map(url => url))
    },
    handleValueChange(e) {
      this.$emit('input', e)
    }
  }
}
</script>

<style lang="scss">
.upload-wrap {
  min-height: 520rpx;
  background: #ffffff;
  padding: 34rpx 0 0 34rpx;
}
.number-wrap {
  padding: 20rpx;
  background: #ffffff;
  > view {
    > view {
      flex-grow: 1;
    }
  }
}
</style>
